<template>
	<view class="container">
		<!-- 标题 -->
		<view class="header">
			<text class="title">蓝牙插件示例</text>
			<text class="platform">当前平台: {{platformInfo.platform}} {{platformInfo.isH5 ? '(Web Bluetooth)' : '(原生蓝牙)'}}</text>
			<text class="support">Web Bluetooth支持: {{platformInfo.webBluetoothSupported ? '是' : '否'}}</text>
		</view>

		<!-- 蓝牙状态 -->
		<view class="status-card">
			<text class="card-title">蓝牙状态</text>
			<view class="status-item">
				<text>适配器状态: </text>
				<text class="status-text" :class="adapterState.available ? 'status-success' : 'status-error'">
					{{adapterState.available ? '可用' : '不可用'}}
				</text>
			</view>
			<view class="status-item">
				<text>蓝牙开关: </text>
				<text class="status-text" :class="adapterState.discovering ? 'status-success' : 'status-warning'">
					{{adapterState.discovering ? '扫描中' : '未扫描'}}
				</text>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="action-card">
			<text class="card-title">操作</text>
			<view class="button-group">
				<button class="action-btn primary" @click="initBluetooth" :disabled="!canInit">
					{{adapterState.available ? '重新初始化' : '初始化蓝牙'}}
				</button>
				<button class="action-btn" @click="startDiscovery" :disabled="!canStartDiscovery">
					开始扫描
				</button>
				<button class="action-btn warning" @click="stopDiscovery" :disabled="!adapterState.discovering">
					停止扫描
				</button>
				<button class="action-btn danger" @click="disconnectAll">
					断开所有连接
				</button>
			</view>
		</view>

		<!-- 设备列表 -->
		<view class="device-card">
			<text class="card-title">已发现设备 ({{devices.length}})</text>
			<view v-if="devices.length === 0" class="empty-state">
				<text class="empty-text">暂无设备，请开始扫描</text>
			</view>
			<view v-for="device in devices" :key="device.deviceId" class="device-item" @click="connectDevice(device)">
				<view class="device-info">
					<text class="device-name">{{device.name || '未知设备'}}</text>
					<text class="device-id">ID: {{device.deviceId}}</text>
					<text class="device-rssi">信号强度: {{device.RSSI}}dBm</text>
				</view>
				<view class="device-status">
					<text class="status-text" :class="getDeviceStatusClass(device.deviceId)">
						{{getDeviceStatusText(device.deviceId)}}
					</text>
				</view>
			</view>
		</view>

		<!-- 已连接设备详情 -->
		<view v-if="currentDevice" class="detail-card">
			<text class="card-title">设备详情</text>
			<view class="device-detail">
				<text class="detail-name">{{currentDevice.name || '未知设备'}}</text>
				<text class="detail-id">{{currentDevice.deviceId}}</text>
				
				<!-- 服务列表 -->
				<view class="services-section">
					<text class="section-title">服务列表 ({{services.length}})</text>
					<view v-for="service in services" :key="service.uuid" class="service-item">
						<text class="service-uuid">{{service.uuid}}</text>
						<text class="service-primary">{{service.isPrimary ? '主服务' : '辅助服务'}}</text>
						
						<!-- 特征值列表 -->
						<view v-if="getCharacteristics(service.uuid).length > 0" class="characteristics-section">
							<text class="characteristics-title">特征值:</text>
							<view v-for="char in getCharacteristics(service.uuid)" :key="char.uuid" class="characteristic-item">
								<text class="char-uuid">{{char.uuid}}</text>
								<view class="char-properties">
									<text v-for="prop in getCharacteristicProperties(char)" :key="prop" class="char-prop">{{prop}}</text>
								</view>
								<view class="char-actions">
									<button v-if="char.properties && char.properties.read" class="char-btn" @click="readCharacteristic(service.uuid, char.uuid)">读取</button>
									<button v-if="char.properties && (char.properties.write || char.properties.writeWithoutResponse)" class="char-btn" @click="writeCharacteristic(service.uuid, char.uuid)">写入</button>
									<button v-if="char.properties && char.properties.notify" class="char-btn" @click="toggleNotify(service.uuid, char.uuid)">
										{{(char.notifying || false) ? '停止通知' : '开启通知'}}
									</button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 数据日志 -->
		<view class="log-card">
			<text class="card-title">数据日志</text>
			<button class="clear-btn" @click="clearLogs">清空日志</button>
			<scroll-view class="log-content" scroll-y="true">
				<view v-for="(log, index) in logs" :key="index" class="log-item" :class="'log-' + log.type">
					<text class="log-time">{{log.time}}</text>
					<text class="log-text">{{log.message}}</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import jzH5Bluetooth from '@/uni_modules/jz-h5-bluetooth/index.js'

	export default {
		data() {
			return {
			// 平台信息
			platformInfo: {
				platform: '',
				isH5: false,
				webBluetoothSupported: false
			},
			
			// 蓝牙适配器状态
			adapterState: {
				available: false,
				discovering: false
			},
			
			// 设备相关
			devices: [],
			currentDevice: null,
			connectedDevices: new Set(),
			
			// 服务和特征值
			services: [],
			characteristics: {},
			
			// 日志
			logs: [],
			
			// 定时器
			discoveryTimer: null
		}
	},
	
	computed: {
		canInit() {
			return this.platformInfo.platform !== ''
		},
		
		canStartDiscovery() {
			return this.adapterState.available && !this.adapterState.discovering
		}
	},
	
	onLoad() {
		this.initPlatformInfo()
		this.setupEventListeners()
		this.addLog('info', '页面加载完成，请点击初始化蓝牙开始使用')
	},
	
	onUnload() {
		this.cleanup()
	},
	
	methods: {
		// 初始化平台信息
		initPlatformInfo() {
			this.platformInfo = jzH5Bluetooth.getPlatformInfo()
			this.addLog('info', `平台: ${this.platformInfo.platform}, Web Bluetooth支持: ${this.platformInfo.webBluetoothSupported}`)
		},
		
		// 设置事件监听
		setupEventListeners() {
			// 监听适配器状态变化
			jzH5Bluetooth.onBluetoothAdapterStateChange((res) => {
				this.adapterState = {
					available: res.available,
					discovering: res.discovering
				}
				this.addLog('info', `蓝牙适配器状态变化: ${JSON.stringify(res)}`)
			})
			
			// 监听设备发现
			jzH5Bluetooth.onBluetoothDeviceFound((res) => {
				if (res.devices && res.devices.length > 0) {
					res.devices.forEach(device => {
						// 去重添加设备
						const existingIndex = this.devices.findIndex(d => d.deviceId === device.deviceId)
						if (existingIndex >= 0) {
							this.devices.splice(existingIndex, 1, device)
						} else {
							this.devices.push(device)
						}
					})
					this.addLog('success', `发现 ${res.devices.length} 个设备`)
				}
			})
			
			// 监听BLE连接状态变化
			jzH5Bluetooth.onBLEConnectionStateChange((res) => {
				if (res.connected) {
					this.connectedDevices.add(res.deviceId)
					this.addLog('success', `设备 ${res.deviceId} 连接成功`)
				} else {
					this.connectedDevices.delete(res.deviceId)
					this.addLog('warning', `设备 ${res.deviceId} 连接断开`)
					
					// 如果是当前设备断开，清空详情
					if (this.currentDevice && this.currentDevice.deviceId === res.deviceId) {
						this.currentDevice = null
						this.services = []
						this.characteristics = {}
					}
				}
			})
			
			// 监听特征值变化
			jzH5Bluetooth.onBLECharacteristicValueChange((res) => {
				const hexData = this.arrayBufferToHex(res.value)
				this.addLog('info', `收到通知数据: ${res.characteristicId} = ${hexData}`)
			})
		},
		
		// 初始化蓝牙
		async initBluetooth() {
			try {
				this.addLog('info', '正在初始化蓝牙适配器...')
				
				const result = await jzH5Bluetooth.openBluetoothAdapter()
				
				if (result.errCode === 0) {
					this.adapterState.available = true
					this.addLog('success', '蓝牙适配器初始化成功')
				} else {
					this.addLog('error', `蓝牙适配器初始化失败: ${result.errMsg}`)
				}
			} catch (error) {
				this.addLog('error', `初始化异常: ${error.message}`)
			}
		},
		
		// 开始扫描设备
		async startDiscovery() {
			try {
				this.devices = []
				
				if (this.platformInfo.isH5) {
					// H5平台使用智能设备选择器，自动添加常见服务权限
					this.addLog('info', '请在弹出的对话框中选择蓝牙设备...')
					this.addLog('info', '正在使用智能设备选择，自动添加常见服务权限以避免权限问题')
					
					// 使用智能设备选择，自动解决服务权限问题
					const result = await jzH5Bluetooth.requestCommonBluetoothDevice({
						success: (res) => {
							this.addLog('success', '设备选择成功，已自动添加常见服务权限')
						},
						fail: (err) => {
							this.addLog('error', `设备选择失败: ${err.errMsg}`)
						}
					})
					
					if (result.errCode === 0) {
						this.devices = [result.device]
						this.addLog('success', `用户选择了设备: ${result.device.name || result.device.deviceId}`)
						this.addLog('info', '提示: 使用了智能服务权限管理，应该可以正常访问设备服务')
					} else {
						this.addLog('error', `设备选择失败: ${result.errMsg}`)
						
						// 如果智能选择失败，提供备用方案
						if (result.errMsg && result.errMsg.includes('取消')) {
							this.addLog('info', '用户取消了设备选择，可以重新点击扫描按钮')
						} else {
							this.addLog('info', '备用方案: 尝试手动指定服务UUID或检查设备兼容性')
						}
					}
				} else {
					// 其他平台使用自动扫描
					this.addLog('info', '开始扫描附近的蓝牙设备...')
					
					const result = await jzH5Bluetooth.startBluetoothDevicesDiscovery({
						services: [], // 扫描所有设备
						allowDuplicatesKey: false,
						interval: 0
					})
					
					if (result.errCode === 0) {
						this.adapterState.discovering = true
						this.addLog('success', '开始扫描设备')
						
						// 设置扫描超时
						this.discoveryTimer = setTimeout(() => {
							this.stopDiscovery()
						}, 10000)
					} else {
						this.addLog('error', `扫描失败: ${result.errMsg}`)
					}
				}
			} catch (error) {
				this.addLog('error', `扫描异常: ${error.message}`)
			}
		},
		
		// 停止扫描
		async stopDiscovery() {
			try {
				if (this.discoveryTimer) {
					clearTimeout(this.discoveryTimer)
					this.discoveryTimer = null
				}
				
				if (!this.platformInfo.isH5) {
					const result = await jzH5Bluetooth.stopBluetoothDevicesDiscovery()
					if (result.errCode === 0) {
						this.adapterState.discovering = false
						this.addLog('info', '停止扫描设备')
					}
				}
			} catch (error) {
				this.addLog('error', `停止扫描异常: ${error.message}`)
			}
		},
		
		// 连接设备
		async connectDevice(device) {
			try {
				if (this.connectedDevices.has(device.deviceId)) {
					this.addLog('warning', '设备已连接')
					return
				}
				
				// H5平台先检查设备兼容性
				if (this.platformInfo.isH5) {
					this.addLog('info', '正在检查设备兼容性...')
							const compatResult = jzH5Bluetooth.checkDeviceCompatibility(device.deviceId)
					
					if (compatResult.errCode === 0) {
						if (!compatResult.compatible) {
							this.addLog('warning', `设备兼容性警告: ${compatResult.reason}`)
							if (compatResult.suggestions && compatResult.suggestions.length > 0) {
								compatResult.suggestions.forEach(suggestion => {
									this.addLog('info', `建议: ${suggestion}`)
								})
							}
							// 继续尝试连接，但给出警告
						} else {
							this.addLog('success', `设备兼容性检查通过: ${compatResult.reason}`)
						}
					}
				}
				
				this.addLog('info', `正在连接设备: ${device.name || device.deviceId}`)
				
				const result = await jzH5Bluetooth.createBLEConnection({
					deviceId: device.deviceId,
					timeout: 10000
				})
				
				if (result.errCode === 0) {
					this.currentDevice = device
					this.connectedDevices.add(device.deviceId)
					this.addLog('success', `设备连接成功: ${device.name || device.deviceId}`)
					
					// 发现服务
					await this.discoverServices(device.deviceId)
				} else {
					this.addLog('error', `设备连接失败: ${result.errMsg}`)
					
					// 根据错误提供建议
					if (result.errMsg && result.errMsg.includes('不兼容')) {
						this.addLog('info', '提示: 该设备可能不支持BLE连接，建议尝试其他设备')
					} else if (result.errMsg && result.errMsg.includes('范围')) {
						this.addLog('info', '提示: 请确保设备在蓝牙范围内并重新尝试')
					}
				}
			} catch (error) {
				this.addLog('error', `连接异常: ${error.message}`)
			}
		},
		
		// 发现服务
		async discoverServices(deviceId) {
			try {
				this.addLog('info', '正在发现服务...')
				
				const result = await jzH5Bluetooth.getBLEDeviceServices({
					deviceId: deviceId
				})
				
				if (result.errCode === 0) {
					this.services = result.services || []
					this.addLog('success', `发现 ${this.services.length} 个服务`)
					
					// 为每个服务发现特征值
					for (const service of this.services) {
						await this.discoverCharacteristics(deviceId, service.uuid)
					}
				} else {
					this.addLog('error', `服务发现失败: ${result.errMsg}`)
				}
			} catch (error) {
				this.addLog('error', `服务发现异常: ${error.message}`)
			}
		},
		
		// 发现特征值
		async discoverCharacteristics(deviceId, serviceId) {
			try {
				const result = await jzH5Bluetooth.getBLEDeviceCharacteristics({
					deviceId: deviceId,
					serviceId: serviceId
				})
				
				if (result.errCode === 0) {
					this.characteristics[serviceId] = result.characteristics || []
					this.addLog('success', `服务 ${serviceId} 发现 ${result.characteristics.length} 个特征值`)
				} else {
					this.addLog('error', `特征值发现失败: ${result.errMsg}`)
				}
			} catch (error) {
				this.addLog('error', `特征值发现异常: ${error.message}`)
			}
		},
		
		// 读取特征值
		async readCharacteristic(serviceId, characteristicId) {
			try {
				if (!this.currentDevice) return
				
				this.addLog('info', `读取特征值: ${characteristicId}`)
				
				const result = await jzH5Bluetooth.readBLECharacteristicValue({
					deviceId: this.currentDevice.deviceId,
					serviceId: serviceId,
					characteristicId: characteristicId
				})
				
				if (result.errCode === 0) {
					const hexData = this.arrayBufferToHex(result.value)
					this.addLog('success', `读取成功: ${characteristicId} = ${hexData}`)
				} else {
					this.addLog('error', `读取失败: ${result.errMsg}`)
				}
			} catch (error) {
				this.addLog('error', `读取异常: ${error.message}`)
			}
		},
		
		// 写入特征值
		async writeCharacteristic(serviceId, characteristicId) {
			try {
				if (!this.currentDevice) return
				
				// 示例数据：写入 "Hello"
				const testData = "Hello"
				const buffer = this.stringToArrayBuffer(testData)
				
				this.addLog('info', `写入特征值: ${characteristicId} = ${testData}`)
				
				const result = await jzH5Bluetooth.writeBLECharacteristicValue({
					deviceId: this.currentDevice.deviceId,
					serviceId: serviceId,
					characteristicId: characteristicId,
					value: buffer
				})
				
				if (result.errCode === 0) {
					this.addLog('success', `写入成功: ${characteristicId}`)
				} else {
					this.addLog('error', `写入失败: ${result.errMsg}`)
				}
			} catch (error) {
				this.addLog('error', `写入异常: ${error.message}`)
			}
		},
		
		// 切换通知
		async toggleNotify(serviceId, characteristicId) {
			try {
				if (!this.currentDevice) return
				
				const characteristic = this.getCharacteristics(serviceId).find(c => c.uuid === characteristicId)
				if (!characteristic) return
				
				// 获取当前通知状态，如果没有设置则默认为false
				const currentNotifying = characteristic.notifying || false
				const enable = !currentNotifying
				
				this.addLog('info', `${enable ? '开启' : '关闭'}通知: ${characteristicId}`)
				
				const result = await jzH5Bluetooth.notifyBLECharacteristicValueChange({
					deviceId: this.currentDevice.deviceId,
					serviceId: serviceId,
					characteristicId: characteristicId,
					state: enable
				})
				
				if (result.errCode === 0) {
					// 更新状态
					this.$set(characteristic, 'notifying', enable)
					this.addLog('success', `通知${enable ? '开启' : '关闭'}成功: ${characteristicId}`)
				} else {
					this.addLog('error', `通知设置失败: ${result.errMsg}`)
				}
			} catch (error) {
				this.addLog('error', `通知设置异常: ${error.message}`)
			}
		},
		
		// 断开所有连接
		async disconnectAll() {
			try {
				const result = await jzH5Bluetooth.disconnectAllDevices()
				if (result.errCode === 0) {
					this.connectedDevices.clear()
					this.currentDevice = null
					this.services = []
					this.characteristics = {}
					this.addLog('success', '已断开所有设备连接')
				}
			} catch (error) {
				this.addLog('error', `断开连接异常: ${error.message}`)
			}
		},
		
		// 获取设备状态文本
		getDeviceStatusText(deviceId) {
			if (this.connectedDevices.has(deviceId)) {
				return this.currentDevice && this.currentDevice.deviceId === deviceId ? '已连接(当前)' : '已连接'
			}
			return '未连接'
		},
		
		// 获取设备状态样式
		getDeviceStatusClass(deviceId) {
			if (this.connectedDevices.has(deviceId)) {
				return this.currentDevice && this.currentDevice.deviceId === deviceId ? 'status-success' : 'status-info'
			}
			return 'status-default'
		},
		
		// 获取特征值列表
		getCharacteristics(serviceId) {
			return this.characteristics[serviceId] || []
		},
		
		// 获取特征值属性列表（将对象转换为数组）
		getCharacteristicProperties(char) {
			if (!char.properties) return []
			
			const props = []
			const propertyMap = {
				read: '读取',
				write: '写入',
				writeWithoutResponse: '无响应写入',
				notify: '通知',
				indicate: '指示',
				broadcast: '广播',
				authenticatedSignedWrites: '认证签名写入',
				extendedProperties: '扩展属性'
			}
			
			Object.keys(char.properties).forEach(key => {
				if (char.properties[key]) {
					props.push(propertyMap[key] || key)
				}
			})
			
			return props
		},
		
		// 工具方法：ArrayBuffer转十六进制字符串
		arrayBufferToHex(buffer) {
			return Array.prototype.map.call(new Uint8Array(buffer), x => ('00' + x.toString(16)).slice(-2)).join(' ')
		},
		
		// 工具方法：字符串转ArrayBuffer
		stringToArrayBuffer(str) {
			const encoder = new TextEncoder()
			return encoder.encode(str).buffer
		},
		
		// 添加日志
		addLog(type, message) {
			const time = new Date().toLocaleTimeString()
			this.logs.unshift({
				type: type, // success, error, warning, info
				message: message,
				time: time
			})
			
			// 限制日志数量
			if (this.logs.length > 100) {
				this.logs = this.logs.slice(0, 100)
			}
		},
		
		// 清空日志
		clearLogs() {
			this.logs = []
		},
		
		// 清理资源
		cleanup() {
			if (this.discoveryTimer) {
				clearTimeout(this.discoveryTimer)
			}
		}
		}
	}
</script>

<style scoped>
.container {
	padding: 20rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.header {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	padding: 30rpx;
	border-radius: 20rpx;
	margin-bottom: 20rpx;
	text-align: center;
}

.title {
	font-size: 42rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 10rpx;
}

.platform, .support {
	font-size: 28rpx;
	opacity: 0.9;
	display: block;
	margin-bottom: 5rpx;
}

.status-card, .action-card, .device-card, .detail-card, .log-card {
	background: white;
	border-radius: 15rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
}

.card-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 20rpx;
}

.status-item {
	display: flex;
	align-items: center;
	margin-bottom: 15rpx;
	font-size: 30rpx;
}

.status-text {
	font-weight: bold;
}

.status-success { color: #52c41a; }
.status-error { color: #ff4d4f; }
.status-warning { color: #faad14; }
.status-info { color: #1890ff; }
.status-default { color: #666; }

.button-group {
	display: flex;
	flex-wrap: wrap;
	gap: 15rpx;
}

.action-btn {
	flex: 1;
	min-width: 200rpx;
	height: 80rpx;
	border-radius: 40rpx;
	border: none;
	font-size: 28rpx;
	color: white;
	background: #1890ff;
}

.action-btn.primary { background: #1890ff; }
.action-btn.warning { background: #faad14; }
.action-btn.danger { background: #ff4d4f; }
.action-btn:disabled { background: #d9d9d9; }

.empty-state {
	text-align: center;
	padding: 40rpx;
}

.empty-text {
	color: #999;
	font-size: 28rpx;
}

.device-item {
		display: flex;
		align-items: center;
	padding: 20rpx;
	border: 2rpx solid #f0f0f0;
	border-radius: 10rpx;
	margin-bottom: 10rpx;
	background: #fafafa;
}

.device-info {
	flex: 1;
}

.device-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 5rpx;
}

.device-id, .device-rssi {
	font-size: 24rpx;
	color: #666;
	display: block;
	margin-bottom: 3rpx;
}

.device-status {
	padding: 10rpx 20rpx;
	border-radius: 20rpx;
	background: #f0f0f0;
}

.device-detail {
	background: #f9f9f9;
	border-radius: 10rpx;
	padding: 20rpx;
}

.detail-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 10rpx;
}

.detail-id {
	font-size: 24rpx;
	color: #666;
	display: block;
	margin-bottom: 20rpx;
}

.services-section {
	margin-top: 20rpx;
}

.section-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 15rpx;
}

.service-item {
	background: white;
	border-radius: 10rpx;
	padding: 20rpx;
	margin-bottom: 15rpx;
	border: 2rpx solid #e8e8e8;
}

.service-uuid {
	font-size: 28rpx;
	color: #1890ff;
	display: block;
	margin-bottom: 5rpx;
	font-family: monospace;
}

.service-primary {
	font-size: 24rpx;
	color: #666;
	display: block;
	margin-bottom: 15rpx;
}

.characteristics-section {
	margin-top: 15rpx;
	padding-top: 15rpx;
	border-top: 2rpx solid #f0f0f0;
}

.characteristics-title {
	font-size: 26rpx;
	font-weight: bold;
	color: #666;
	display: block;
	margin-bottom: 10rpx;
}

.characteristic-item {
	background: #f9f9f9;
	border-radius: 8rpx;
	padding: 15rpx;
	margin-bottom: 10rpx;
}

.char-uuid {
	font-size: 24rpx;
	color: #52c41a;
	display: block;
	margin-bottom: 8rpx;
	font-family: monospace;
}

.char-properties {
	display: flex;
	flex-wrap: wrap;
	gap: 8rpx;
	margin-bottom: 10rpx;
}

.char-prop {
	font-size: 20rpx;
	background: #e6f7ff;
	color: #1890ff;
	padding: 4rpx 8rpx;
	border-radius: 4rpx;
}

.char-actions {
		display: flex;
	gap: 10rpx;
}

.char-btn {
	font-size: 22rpx;
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	border: 2rpx solid #1890ff;
	color: #1890ff;
	background: white;
}

.clear-btn {
	position: absolute;
	right: 30rpx;
	top: 25rpx;
	font-size: 24rpx;
	padding: 10rpx 20rpx;
	border-radius: 20rpx;
	border: 2rpx solid #ff4d4f;
	color: #ff4d4f;
	background: white;
}

.log-content {
	height: 400rpx;
	background: #f5f5f5;
	border-radius: 10rpx;
	padding: 15rpx;
}

.log-item {
	margin-bottom: 10rpx;
	padding: 10rpx;
	border-radius: 6rpx;
	font-size: 24rpx;
}

.log-success { background: #f6ffed; border-left: 6rpx solid #52c41a; }
.log-error { background: #fff2f0; border-left: 6rpx solid #ff4d4f; }
.log-warning { background: #fffbe6; border-left: 6rpx solid #faad14; }
.log-info { background: #e6f7ff; border-left: 6rpx solid #1890ff; }

.log-time {
	color: #999;
	font-size: 20rpx;
	margin-right: 10rpx;
}

.log-text {
	color: #333;
	}
</style>
